<template>
	<view class="prod-box" :style="{ '--price': vuex_config.price, '--color': vuex_config.themeColor1 }">
		<view class="spec-title u-font-32 fw-bold">{{ orderInfo.business_name }}</view>
		<view class="spec-list">
			<view class="spec_item_box" v-for="(item, index) in orderInfo.detailed" :key="index">
				<view class="spec-item u-font-28" @click="toProd({
					prodType:orderInfo.type,
					pk_id:item.product_id
				})">
					<image class="img" :src="(item.product_img || '').split(',')[0]"></image>
					<view class="prod_info">
						<view class="info_l">
							<view class="si-name u-line-2">{{ item.product_name || '线下收款' }}</view>
							<view class="si_spec u-line-2" v-if="item.name">{{ item.name }}</view>
							<template v-if="item.is_refund == 1 && orderInfo.type == 1">
								<template v-if="item.refund_status == 1">
									<view class="refund-title">
										退款申请中
									</view>
								</template>
								<template v-else-if="item.refund_status == 4">
									<view class="refund-title">
										退款审核中
									</view>
								</template>
								<template v-else-if="item.refund_status == 2 ">
									<view class="refund-title">
										已退款
									</view>
								</template>
								<template v-else-if="item.refund_status == 3 ">
									<view class="refund-title">
										申请被拒绝
									</view>
								</template>
							</template>
						</view>
						<view class="si_price">
							<view class="price_box">
								<text class="sign">￥</text>
								<text class="price_num">{{ item.price.toFixed(2) }}</text>
							</view>
							<view class="buy_box">
								<text class="buy_x">x</text>
								<text class="buy_num">{{ item.num }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="prod_btns">
					<template v-if="judegEvaluate(item,orderInfo)">
						<view class="label_border btn_item" @click="$linkToComment(index)">立即评价</view>
					</template>
					<template v-if="judgeRefund(item,orderInfo)">
						<view class="label_border btn_item"
							@click="$to(`/package/order/refund/refundDetail?id=${orderInfo.pk_id}&order_no=${orderInfo.order_no}&detailId=${item.pk_id}`)">
							{{orderInfo.pay_status == 4 || hasSend?'退款退货' : '商品退款'}} 
						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				hasSend:false,// 是否有发过货（针对普通商品，主要是为了知道，在申请退款中时，可以知道之前是什么状态）
			};
		},
		props: {
			orderInfo: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		computed: {
			// 判断退款按钮是否需要显示
			judgeRefund(item, orderInfo) {
				return function(item, orderInfo) {
					if (item.price <= 0 || orderInfo.pay_type == 4) {
						return false
					}
					// 判断是否能退款，是否为普通商品 主订单是否是未申请或者驳回状态，主订单支付状态是否为已支付/待收货，
					// 判断商品不是共享产品，共享产品目前不支持退款，判断改商品是否再未申请或者驳回状态 都满足就显示
					else if (item.is_refund == 1 && orderInfo.type == 1 && (item.refund_status == '0' || item
							.refund_status == 3) && (orderInfo.refund_status == '0' || orderInfo.refund_status ==
							'3') && (orderInfo.pay_status == 1 || orderInfo.pay_status == 2 || orderInfo.pay_status == 4)) {
						return true
					} else {
						return false
					}
				}
			},
			// 判断是否显示评价按钮
			judegEvaluate(item, orderInfo) {
				return function(item, orderInfo) {
					if (orderInfo.pay_status == 5 &&
						(item.refund_status == '0' || item.refund_status == '3') &&
						orderInfo.type != '10' &&
						orderInfo.type != '11' &&
						item.is_comment <= 0) {
						return true
					} else {
						return false
					}
				}
			},
		},
		mounted () {
			console.log('orderInfo',this.orderInfo.detailed)
			this.orderInfo.detailed.forEach((item)=>{
				console.log('item',item.express_no)
				if(item.express_no){
					this.hasSend = true
				}
			})
		},
		methods: {

			toProd(item) {

				let url = ''
				
				if (item.prodType == 1) {
					url = `/package/product/local/prod/index?id=${item.pk_id}`
				} else if (item.prodType == 9) {
					url = `/package/product/group/details/index?id=${item.pk_id}`
				} else if (item.prodType == 2) {
					url = `/package/product/ticket/prod/index?id=${item.pk_id}`
				} else if (item.prodType == 6) {
					url = `/package/product/vipProd/detail?id=${item.pk_id}`
				} else if (item.prodType == 12) {
					url = `/package/product/bonusProd/detail?id=${item.pk_id}`
				} else if (item.prodType == 5) {
					url = `/package/video/details/index?id=${item.pk_id}`
				}
				
				this.$to(url)
			},

			// 跳转到订单评论页
			$linkToComment(index) {
				uni.navigateTo({
					url: `/package/order/comment/addComment?index=${index}`,
					// success: res => {
					// 	res.eventChannel.emit('acceptParams', {
					// 		item: this.orderInfo,
					// 		index: index
					// 	});
					// }
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 商品信息 */
	.prod-box {
		width: 100%;

		.spec-title {
			width: 100%;
			padding: 20rpx 0;
		}

		.spec-list {
			width: 100%;

			.spec_item_box {
				padding-bottom: 14rpx;
			}

			.spec-item {
				display: flex;

				.img {
					width: 170rpx;
					height: 170rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
			}
		}

		.prod_info {
			flex: 1;
			overflow: hidden;
			display: flex;

			.info_l {
				flex: 1;
				overflow: hidden;
				font-size: 28rpx;

				.si_spec {
					margin-top: 10rpx;
					color: #999;
				}

				.refund-title {
					margin-top: 20rpx;
					display: inline-block;
					padding: 2rpx 6rpx;
					border-radius: 4rpx;
					background-color: #FFF1E1;
					color: #C55A0C;
					font-size: 24rpx;
				}
			}

			.si_price {
				margin-left: 18rpx;
				text-align: right;

				.price_box {
					.sign {
						font-size: 24rpx;
					}

					.price_num {
						// font-weight: bold;
						font-size: 32rpx;
					}
				}

				.buy_box {
					color: #999;
					margin-top: 4rpx;

					.buy_x {
						font-size: 26rpx;
					}

					.buy_num {
						margin-left: 4rpx;
						font-size: 32rpx;
					}
				}
			}
		}

		.prod_btns {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn_item {
				margin-top: 14rpx;
				display: inline-block;
				color: #444;
				// background-color: var(--color);
				// color: #fff;
				font-size: 24rpx;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 26rpx;
				border-radius: 28rpx;
				height: 60rpx;

				&::after {
					border-radius: 70rpx;
					border: 1rpx solid #C9C9C9;
				}
			}
		}
	}
</style>
